<template>

  <div class="sitenav">
    <div class="discount-title clearfix">
      <span
      @click="handleBack"
      class="mui-icon mui-icon-arrowleft"></span>
      <h2 class="">国内导航</h2>
    </div>
    <div class="sitenav-contaniner">
      <ul class="container-nav clearfix">
        <li v-for="item in sitenavList" :key="item.navId">
          <a :href="item.navHref">
            <img :src="item.navImg" alt="">
            <span>{{item.navTitle}}</span>
          </a>
        </li>
      </ul>
    </div>
    <mm-footer></mm-footer>
  </div>
</template>
<script>
import mmFooter from "./publicComponents/mmFooter.vue"
export default {
  data() {
    return {
      sitenavList: []
    }
  },
  created() {
    this.getsitenav()
  },
  methods: {
    getsitenav() {
      this.$http.get('api/getsitenav').then((res) => {
        this.sitenavList = res.body.result
        console.log(this.sitenavList)
      })
    },
    handleBack() {
      this.$router.go(-1)
    }
  },
  components: {
    mmFooter
  }
};
</script>
<style lang="less" scoped>
@import "../../src/less/var";
  .sitenav {
    .discount-title {
    height: 98 / @base;
    padding: 10 / @base 15 / @base;
    background-color: #ff9e20;
    position: relative;
    h2 {
      font-size: 28 / @base;
      height: 100%;
      line-height: 70 / @base;
      margin: 0;
      text-align: center;
      margin: 0 auto;
    }
    span {
      font-size: 40 / @base;
      height: 100%;
      line-height: 70 / @base;
      position: absolute;
      left: 20/@base;
    }
  }
    .sitenav-contaniner {
      ul {
        padding: 10/@base 90/@base;
        li {
          float: left;
          height: 70/@base;
          // line-height: 70/@base;
          
          border: 1px solid #ccc;
          padding: 0 25/@base;
          margin-right: 10/@base;
          margin-top: 10/@base;
          a {
            display: block;
            display: flex;
            height: 70/@base;
            justify-content: center;
            align-items: center;
            img {
              width: 30/@base;
              height: 30/@base;
              display: inline-block;
              vertical-align: middle;

            }
            span {
              font-size: 24/@base;
              padding: 0 10/@base;
            }
          }
        }
      }
    }
  }
</style>
